<template>
  <div class="contant">
    <img src="/static/imgs/hero/heroBg.png" alt="" class="indexPic">
    <router-link to="/extractFirst" class="aExtract">
      <img src="/static/imgs/hero/extract.png" alt="" class="extract">
    </router-link>
    <div class="list" id="list">
      <div class="hero" v-for="item in heroList">
        <div class="heroF">
          <img :src="'http://www.kaimou.net/sanguoImgs/'+item[3]+'.jpg'" alt="">
        </div>
        <div class="heroM">
          <div class="heroName">
            {{heroImgs[item[3]]}}
            <span class="heroXing">******</span>
          </div>
          <div class="heroInfo" id="heroInfo">
            <div>武力 : {{item[4]}}</div>
            <div>智力 : {{item[9]}}</div>
            <div>统率 : {{item[5]}}</div>
            <div>防御 : {{item[8]}}</div>
            <div>政治 : {{item[6]}}</div>
            <div>魅力 : {{item[7]}}</div>
          </div>
        </div>
        <div class="heroR">
          <img src="/static/imgs/hero/hecheng.png" alt="" class="hecheng" @click="synthesis(item[3])">
          <img src="/static/imgs/hero/chushou.png" alt="">
        </div>
      </div>
    </div>
    <com-tab></com-tab>
  </div>
</template>

<script>
  import tab from '@/components/tab'
  import api from '@/api'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'hero',
    data () {
      return {
        heroList: [],
        heroImgs:api.heroImgs
      }
    },
    methods : {
      synthesis (num) {
        let query = this.$route.query;
        console.log(query);
        if(query.weizhi === 1){
          query.numR = num;
        }else {
          query.numL = num;
        }
        this.$router.push({path: '/synthesis',query: query})
      }
    },
    mounted () {
      Indicator.open({
        spinnerType: 'fading-circle'
      });
      let that = this;
      api.instance.tokensOfOwner(api.defaultAccount,function(error, result){
        Indicator.close();
        if(result.length === 0){
          that.heroList = []
          Toast('暂无英雄，请抽取武将');
        }else {
          result.forEach(function (item) {
//            console.log(item.toNumber())
            api.instance.getSango(item.toNumber(),function (err,res) {
              that.heroList.push(res.toString().split(','))
              console.log(res.toString())
            })
          })
        }
      });
    },
    components: {
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    position: relative;
    .indexPic{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .aExtract{
      width: 30%;
      position: absolute;
      top:15%;
      right: 4%;
      z-index: 10;
      .extract{
        width: 100%;
      }
    }
    .list{
      width: 94%;
      margin-left: 3%;
      height: 68%;
      overflow-y: auto;
      z-index: 3;
      position: absolute;
      top:21.5%;
      .hero{
        height: 24%;
        background-image: url("/static/imgs/hero/listKuang.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 2%;
        overflow: hidden;
        .heroF{
          float: left;
          height: 79%;
          width: 24.4%;
          background-image: url("/static/imgs/hero/headKuang.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-left: 2%;
          margin-top: 3.3%;
          overflow: hidden;
          img{
            width: 98%;
            margin-left: 1%;
            margin-top: 2%;
          }
        }
        .heroM{
          float: left;
          width: 46%;
          font-size: 1rem;
          margin-left: 2%;
          .heroName{
            width: 65%;
            height: 1.5rem;
            background-image: url("/static/imgs/hero/txtKuang.png");
            background-size: 100%;
            background-repeat: no-repeat;
            color: #fce619;
            margin-top: 11%;
            padding-left: 2%;
            position: relative;
            .heroXing{
              font-size: 1.5rem;
              position: absolute;
              right: 5%;
            }
          }
          .heroInfo{
            color: white;
            margin-top: 2%;
          }
          .heroInfo>div{
            float: left;
            width: 40%;
            margin-left: 2%;
            margin-top: 0;
          }
          .heroInfo>div:nth-child(2n+1){
            margin-right: 16%;
          }
        }
        .heroR{
          float: right;
          width: 20%;
          margin-right: 2%;
          .hecheng{
            margin-top: 50%;
          }
        }
        .heroR>img{
          width: 89%;
          margin-bottom: 3%;
        }
      }
    }
  }
  @media screen and (max-width: 350px) {
    #heroInfo{
      margin-top: 0;
    }
    #heroInfo>div{
      margin-top: 0;
    }
  }
  @media screen and (min-height: 740px)  and (min-width: 360px){
    #list>div{
      height: 20%;
    }
  }
</style>
